<template>
  <div class="jnpf-content-wrapper">
    <div class="jnpf-tree-section">
      <div class="box_title">专家组别</div>
      <div class="line"></div>
      <div class="box_content">
        <div class="add_btn"> <a-button size="small" :icon="h(PlusOutlined)" type="primary" @click="toAdd"></a-button></div>
        <a-collapse v-model:activeKey="activeKey" :bordered="false" style="background: rgb(255, 255, 255)" @change="changeTab">
          <template #expandIcon="{ isActive }">
            <caret-right-outlined :rotate="isActive ? 90 : 0" />
          </template>
          <a-collapse-panel key="1" header="全部">
            <!-- <div v-for="item in items" :key="item.id" :class="['item', { active: selectedItem === item.id }]" @click="selectItem(item.id)">
              {{ item.fullName }}
              <a-tooltip placement="top">
                <template #title>
                  <span>编辑专家组别</span>
                </template>
                <FormOutlined class="icon" @click="toEdit(item)" />
              </a-tooltip>
              <a-tooltip placement="top">
                <template #title>
                  <span>删除专家组别</span>
                </template>
                <DeleteOutlined class="icon" @click="toDel(item)" />
              </a-tooltip>
            </div> -->
            <div
              v-for="item in items"
              :key="item.id"
              :class="['item', { active: changeDom === item.id }]"
              @mouseover="hoverItem(item.id)"
              @mouseleave="leaveItem(item.id)"
              @click="selectItem(item)">
              {{ item.fullName }}
              <a-tooltip placement="top" v-if="selectedItem === item.id">
                <template #title>
                  <span>编辑专家组别</span>
                </template>
                <FormOutlined class="icon" @click="toEdit(item)" />
              </a-tooltip>
              <a-tooltip placement="top" v-if="selectedItem === item.id">
                <template #title>
                  <span>删除专家组别</span>
                </template>
                <DeleteOutlined class="icon" @click="toDel(item)" />
              </a-tooltip>
            </div>
          </a-collapse-panel>
        </a-collapse>
      </div>
    </div>
    <div class="jnpf-content-wrapper-center">
      <div class="jnpf-content-wrapper-search-box" style="padding-bottom: 12px; display: flex">
        <div class="input-container">
          <label class="label" for="inputField">专家姓名:</label>
          <a-input id="inputField" style="width: 38%" v-model:value="proName" placeholder="请输入" />
          <label class="label" for="inputField">工作单位:</label>
          <a-input id="inputField" style="width: 38%" v-model:value="proCompany" placeholder="请输入" />
          <label class="label" for="inputField">联系方式:</label>
          <a-input id="inputField" style="width: 38%" v-model:value="proTel" placeholder="请输入" />
        </div>
        <div class="button">
          <a-button @click="reset">重置</a-button>
          <a-button type="primary" style="margin-left: 10px" @click="init">查询</a-button>
        </div>
      </div>
      <div class="jnpf-content-wrapper-content">
        <div style="padding-top: 10px; background: #fafafa">
          <a-button style="margin-left: 10px" :icon="h(PlusOutlined)" type="primary" @click="addList">新建</a-button>
          <a-upload v-model="fileList" name="file" :action="actions" :headers="headers" @change="handleChange">
            <a-button style="margin-left: 10px">批量导入</a-button>
          </a-upload>
          <a :href="templateUrl" download="专家导入模版.zip">
            <a-button style="float: right; margin-right: 10px">模板下载</a-button>
          </a>
          <a-table
            :columns="columns"
            :pagination="paginationProp"
            :loading="tableLoading"
            :data-source="dataList"
            :scroll="{ x: 1500, y: 400 }"
            :style="{ height: 'calc(100vh - 280px)' }">
            <template #bodyCell="{ column, record, text }">
              <template v-if="column.key === 'status'">
                <span class="custom-cell">
                  <span :class="text == 1 ? 'dcq-dot' : 'ycq-dot'"></span>
                  {{ text == 1 ? '无效' : '有效' }}
                </span>
              </template>
              <template v-if="column.key === 'sex'">
                {{ text == 1 ? '男' : '女' }}
              </template>
              <template v-if="column.key === 'operation'">
                <div class="button-container">
                  <a-button type="link" class="operation-button" @click="hasView(record)">查看</a-button>
                  <a-button type="link" class="operation-button" @click="hasEdit(record)">编辑</a-button>
                  <a-button type="link" danger class="operation-button" @click="hasDel(record)">删除</a-button>
                </div>
              </template>
            </template>
          </a-table>
        </div>
      </div>
    </div>
    <!-- 新增弹窗 -->
    <a-modal v-model:visible="open" :title="addTitle" centered :maskClosable="false" :keyboard="false" :width="800" @ok="handleOk">
      <a-form ref="formRef" :model="formSchemas" name="tree-node" :rules="rules" autocomplete="off" :label-col="{ style: { width: '120px' } }" :colon="false">
        <a-row :gutter="16">
          <a-col class="gutter-row" :span="12">
            <a-form-item label="专家姓名" name="proName">
              <a-input v-model:value="formSchemas.proName" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col class="gutter-row" :span="12">
            <a-form-item label="专家编号：">
              <a-input v-model:value="formSchemas.proNumber" :disabled="true" placeholder="保存后系统自动生成" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col class="gutter-row" :span="12">
            <a-form-item label="专家组别：" name="proGroup">
              <a-select v-model:value="formSchemas.proGroup" placeholder="请选择" :options="items"></a-select>
            </a-form-item>
          </a-col>
          <a-col class="gutter-row" :span="12">
            <a-form-item label="性别：" name="proGender">
              <a-select v-model:value="formSchemas.proGender" placeholder="请选择" :options="genderOptions"></a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col class="gutter-row" :span="12">
            <a-form-item label="联系方式" name="proTel">
              <a-input-number :controls="false" v-model:value="formSchemas.proTel" placeholder="请输入手机号码" />
            </a-form-item>
          </a-col>
          <a-col class="gutter-row" :span="12">
            <a-form-item label="出生日期：">
              <a-date-picker v-model:value="formSchemas.proBirthday" valueFormat="YYYY-MM-DD" placeholder="请选择  年月日" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col class="gutter-row" :span="24">
            <a-form-item label="专家来源：" name="proSource">
              <a-radio-group v-model:value="formSchemas.proSource">
                <a-radio-button value="1">内部专家</a-radio-button>
                <a-radio-button value="2">外部专家</a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col class="gutter-row" :span="24">
            <a-form-item label="工作单位：" name="proUnits">
              <a-input-group compact>
                <a-input v-model:value="formSchemas.proUnits" style="width: calc(100% - 200px)" placeholder="请选择或输入工作单位" />
                <a-button v-if="formSchemas.proSource == 1" @click="hasChoose">选择</a-button>
              </a-input-group>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col class="gutter-row" :span="24">
            <a-form-item label="现任职务：" name="proDuties">
              <a-input v-model:value="formSchemas.proDuties" placeholder="请输入" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col class="gutter-row" :span="24">
            <a-form-item label="专业技术职称：" name="proFessional">
              <a-input v-model:value="formSchemas.proFessional" placeholder="请输入，例：高级会计师等" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col class="gutter-row" :span="12">
            <a-form-item label="专业技术特长：" name="proSpecialty">
              <a-input v-model:value="formSchemas.proSpecialty" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col class="gutter-row" :span="12">
            <a-form-item label="工龄：">
              <a-input v-model:value="formSchemas.proAge" placeholder="请输入" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col class="gutter-row" :span="24">
            <a-form-item label="状态：" name="proStatus">
              <a-radio-group v-model:value="formSchemas.proStatus">
                <a-radio value="0">有效</a-radio>
                <a-radio value="1">无效</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
    <!-- 专家组别弹窗 -->
    <a-modal v-model:visible="isZbShow" :title="zbTitle" centered :maskClosable="false" :keyboard="false" :width="400" @ok="handleZbOk">
      <a-form
        ref="formZbRef"
        :model="formExperts"
        name="tree-node"
        :rules="expertRules"
        autocomplete="off"
        :label-col="{ style: { width: '100px' } }"
        style="height: 120px"
        :colon="false">
        <a-form-item label="专家组别" name="experts" style="margin-top: 20px">
          <a-input v-model:value="formExperts.experts" placeholder="请输入，例：财务专家" />
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 工作单位弹窗 -->
    <a-modal v-model:visible="unitsShow" title="选择专家组别" centered :maskClosable="false" :keyboard="false" :width="800" @ok="handleUtOk">
      <a-form
        ref="formUtRef"
        :model="formUnit"
        name="tree-node"
        :rules="unitRules"
        autocomplete="off"
        :label-col="{ style: { width: '120px' } }"
        :colon="false">
        <a-form-item label="工作单位" name="unitId" style="margin-top: 20px">
          <JnpfOrganizeSelect
            v-model:value="formUnit.unitId"
            placeholder="请选择"
            @change="onChange"
            :allowClear="true"
            :style="{ width: '100%' }"
            :showSearch="false"
            selectType="all">
          </JnpfOrganizeSelect>
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 查看弹窗 -->
    <a-modal v-model:visible="detailShow" title="查看专家" centered :maskClosable="false" :keyboard="false" :width="1100" @ok="handleDetailOk">
      <div class="detail_box">
        <div class="detail_title">专家信息</div>
        <div class="container">
          <div class="box"
            >专家姓名：<span>{{ detailInfo.zjxm }}</span></div
          >
          <div class="box"
            >联系方式：<span>{{ detailInfo.lxfs }}</span></div
          >
          <div class="box"
            >专家编号：<span>{{ detailInfo.zjbh }}</span></div
          >
        </div>
        <div class="container">
          <div class="box"
            >专家组别：<span>{{ detailInfo.zjzb }}</span></div
          >
          <div class="box"
            >性别：<span>{{ detailInfo.zjxb == '1' ? '男' : '女' }}</span></div
          >
          <div class="box"
            >出生日期：<span>{{ detailInfo.csrq }}</span></div
          >
        </div>
        <div class="container">
          <div class="box"
            >专家来源：<span>{{ detailInfo.zjly == 1 ? '内部专家' : '外部专家' }}</span></div
          >
          <div class="box"
            >工作单位：<span>{{ detailInfo.gzdw }}</span></div
          >
          <div class="box"
            >现任职务：<span>{{ detailInfo.xrzw }}</span></div
          >
        </div>
        <div class="container">
          <div class="box"
            >专业技术职称：<span>{{ detailInfo.jszc }}</span></div
          >
          <div class="box"
            >专业专长：<span>{{ detailInfo.zyzc }}</span></div
          >
          <div class="box"
            >工龄：<span>{{ detailInfo.gl }}</span></div
          >
        </div>
        <div class="container">
          <!-- ff8d23 -->
          <div class="box"
            >状态：<span :style="detailInfo.zt == '0' ? { color: '#52c41a' } : { color: '#ff8d23' }">{{ detailInfo.zt == '0' ? '有效' : '无效' }}</span></div
          >
          <div class="box"></div>
          <div class="box"></div>
        </div>
      </div>
    </a-modal>
    <!-- 上传组件 -->
    <FileUploader ref="fileUploaderRef" v-bind="getBindValue" @fileSuccess="handleFileSuccess" />
  </div>
</template>

<script lang="ts" setup>
  const templateUrl = '/zip/专家导入模版.zip';
  // const templateUrl = '../专家导入模版.xlsx';
  import { ref, h, reactive, onMounted, toRefs, computed } from 'vue';
  import {
    getList,
    dictionaryData,
    addZjList,
    addDictionary,
    editDictionary,
    deleteDictionary,
    editList,
    deleteList,
    queryInfo,
    uploadFile,
    resultPrinting,
  } from './helper/api';
  import { buildBitUUID } from '/@/utils/uuid';
  import FileUploader from './FileUploader.vue';
  import { downloadByUrl } from '/@/utils/file/download';
  import { PlusOutlined, CaretRightOutlined, DeleteOutlined, FormOutlined } from '@ant-design/icons-vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import JnpfOrganizeSelect from './OrganizeSelect.vue';
  import { Modal as AModal, DatePicker as ADatePicker } from 'ant-design-vue';
  import type { FormInstance } from 'ant-design-vue';
  import dayjs from 'dayjs';
  const { createConfirm, createMessage } = useMessage();

  const open = ref<boolean>(false); //新增弹窗
  const tableLoading = ref<boolean>(false); //列表loading
  const addTitle = ref<string>('新增专家'); //新增弹窗标题
  const zbTitle = ref<string>('新增专家组别'); //专家组别标题
  const isZbShow = ref<boolean>(false); //专家组别弹窗
  const unitsShow = ref<boolean>(false); //专家组别弹窗
  const detailShow = ref<boolean>(false); //详情弹窗
  const formZbRef = ref<FormInstance>(); //专家组别弹窗dom
  const formUtRef = ref<FormInstance>(); //工作单位弹窗dom
  const formRef = ref<FormInstance>(); //新增弹窗dom
  const activeKey = ref('1');
  const proName = ref<string>(''); //专家姓名
  const proCompany = ref<string>(''); //工作单位
  const proTel = ref<string>(''); //联系方式
  // 文件上传
  import { getToken } from '/@/utils/auth';
  import { useGlobSetting } from '/@/hooks/setting';
  import { uploadFileProps, fileItem } from './props';
  import { upload } from '../../../api/basic/common';
  import { downloadByData } from '/@/utils/file/download';
  const props = defineProps(uploadFileProps);
  const globSetting = useGlobSetting();
  const actions = globSetting.apiUrl + '/api/tendering/expert/expertImport';
  const getBindValue = computed(() => ({ ...props, value: fileList.value }));
  const fileUploaderRef = ref<any>(null);
  const fileList = ref([]);
  const handleChange = info => {
    if (info.file.status !== 'uploading') {
      if (info.file.response.code == 200) {
        createMessage.success(info.file.response.msg);
        init();
      } else {
        createMessage.error(info.file.response.msg);
      }
    }
  };
  // // 模板下载
  // const downloadByData = () => {
  //   // resultPrinting({ reviewId: data.content.id }).then(res => {
  //   //     console.log('res', res);
  //   //     downloadByUrl({ url: res.data.url, fileName: res.data.name });
  //   //   });
  // };
  const headers = {
    authorization: getToken(),
  };
  //分页相关
  const page = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  const paginationProp = ref({
    showSizeChanger: false,
    showQuickJumper: true,
    pageSize,
    current: page,
    total,
    showTotal: total => `总 ${total} 条`,
    onChange: pageChange,
    onShowSizeChange: pageSizeChange,
  });
  function pageChange(p, pz) {
    page.value = p;
    pageSize.value = pz;
    init();
  }
  function pageSizeChange(_current, size) {
    pageSize.value = size;
    init();
  }
  const onChange = (value, option) => {
    state.formUnit.unitName = option[option.length - 1]['organize'];
    console.log(value, option[option.length - 1]['organize']);
  };
  //性别
  const genderOptions = ref([
    { value: '1', label: '男' },
    { value: '2', label: '女' },
  ]);
  const state = reactive({
    formExperts: {
      experts: '', //专家组别
      id: '', //专家组别
    },
    formSchemas: {
      proName: '', //专家姓名
      proNumber: '', //专家编号
      proGroup: '', //专家组别
      proGender: '', //性别
      proTel: '', //联系方式
      proBirthday: '', //出生日期
      proSource: '0', //专家来源
      proUnits: '', //工作单位
      proDuties: '', //现任职务
      proFessional: '', //技术职称
      proSpecialty: '', //专业特长
      proAge: '', //工龄
      proStatus: '', //状态
    },
    formUnit: {
      //工作单位
      unitName: '', //单位名称
      unitId: '', //单位名称
    },
    detailInfo: {
      zjxm: '专家姓名', //专家姓名
      lxfs: '联系方式', //联系方式
      zjbh: '专家编号', //专家编号
      zjzb: '专家组别', //专家组别
      zjxb: '专家性别', //专家性别
      csrq: '出生日期', //出生日期
      zjly: '专家来源', //专家来源
      gzdw: '工作单位', //工作单位
      xrzw: '现任职务', //现任职务
      jszc: '专业技术职称', //专业技术职称
      zyzc: '专业专长', //专业专长
      gl: '工龄', //工龄
      zt: '状态', //状态
    },
  });
  const { formExperts, formSchemas, formUnit, detailInfo } = toRefs(state);
  // 专家组别弹窗校验
  const expertRules = {
    experts: [{ required: true, message: '必填' }],
  };
  // 工作单位弹窗校验
  const unitRules = {
    // unitName: [{ required: true, message: '必填' }],
    unitId: [{ required: true, message: '必填' }],
  };
  // 新增弹窗校验
  const rules = {
    proName: [{ required: true, message: '必填' }],
    proGender: [{ required: true, message: '必填' }],
    proGroup: [{ required: true, message: '必填' }],
    proTel: [{ required: true, message: '必填' }],
    proSource: [{ required: true, message: '必填' }],
    proUnits: [{ required: true, message: '必填' }],
    proDuties: [{ required: true, message: '必填' }],
    proFessional: [{ required: true, message: '必填' }],
    proSpecialty: [{ required: true, message: '必填' }],
    proStatus: [{ required: true, message: '必填' }],
  };
  const items = ref([]);
  const selectedItem = ref(null);
  const changeDom = ref(null);
  // 分页列表
  const columns = [
    { title: '序号', width: 100, customRender: ({ index }) => index + 1, key: 'name', align: 'center' },
    { title: '编号', width: 100, dataIndex: 'id', key: 'id', align: 'center' },
    { title: '姓名', dataIndex: 'expertName', key: 'expertName', width: 150, align: 'center' },
    { title: '工作单位', dataIndex: 'workUnit', key: 'workUnit', width: 250, align: 'center' },
    { title: '联系方式', dataIndex: 'phoneNumber', key: 'phoneNumber', width: 150, align: 'center' },
    { title: '性别', dataIndex: 'sex', key: 'sex', width: 150, align: 'center' },
    { title: '现任职务', dataIndex: 'post', key: 'post', width: 150, align: 'center' },
    { title: '专业技术职称', dataIndex: 'technicalPosition', key: 'technicalPosition', width: 150, align: 'center' },
    { title: '专业专长', dataIndex: 'professionalExpertise', key: 'professionalExpertise', width: 150, align: 'center' },
    { title: '状态', dataIndex: 'status', key: 'status', width: 150, align: 'center' },
    {
      title: '操作',
      key: 'operation',
      align: 'center',
      fixed: 'right',
      width: 180,
    },
  ];
  const dataList = ref<any[]>([]); //分页数组
  onMounted(() => {
    init();
  });
  // 初始化数据
  const init = () => {
    tableLoading.value = true;
    getList({
      pageNum: page.value,
      pageSize: pageSize.value,
      expertGroup: changeDom.value, //专家id
      orderBy: '',
      expertName: proName.value, //专家姓名
      // companyName: proCompany.value, //工作单位
      workUnit: proCompany.value,
      phoneNumber: proTel.value, //联系方式
    }).then(res => {
      total.value = res.data.total;
      dataList.value = res.data.records;
      tableLoading.value = false;
    });
    zjList();
  };
  // 获取专家列表
  const zjList = () => {
    dictionaryData().then(res => {
      res.data.list.forEach(o => {
        o.label = o.fullName;
        o.value = o.id;
      });
      items.value = res.data.list;
    });
  };
  //重置数据
  const reset = () => {
    proTel.value = '';
    proName.value = '';
    proCompany.value = '';
    changeDom.value = null;
    init();
  };
  //新建列表数据
  const addList = () => {
    addTitle.value = '新增专家';
    state.formSchemas = {
      proName: '', //专家姓名
      proNumber: '', //专家编号
      proGroup: '', //专家组别
      proGender: '', //性别
      proTel: '', //联系方式
      proBirthday: '', //出生日期
      proSource: '0', //专家来源
      proUnits: '', //工作单位
      proDuties: '', //现任职务
      proFessional: '', //技术职称
      proSpecialty: '', //专业特长
      proAge: '', //工龄
      proStatus: '0', //状态
    };
    state.formUnit = {
      unitName: '', //单位名称
      unitId: '', //单位名称
    };
    open.value = true;
  };
  //菜单点击事件
  const selectItem = item => {
    console.log('item', item);
    changeDom.value = item.id;
    init();
  };
  const hoverItem = itemId => {
    selectedItem.value = itemId;
  };
  const leaveItem = () => {
    selectedItem.value = null;
  };
  //添加专家
  const toAdd = () => {
    isZbShow.value = true;
    console.log('toAdd');
  };
  //点击下拉tab切换事件
  const changeTab = v => {
    changeDom.value = null;
    init();
  };
  //修改专家
  const toEdit = v => {
    isZbShow.value = true;
    state.formExperts.id = v.id;
    state.formExperts.experts = v.fullName;
    zbTitle.value = '编辑专家组别';
    console.log('toEdit', v);
  };
  //删除专家
  const toDel = v => {
    createConfirm({
      iconType: 'warning',
      title: '温馨提示',
      content: `请确认是否要删除该条数据,删除后则该条数据不再显示。`,
      onOk: () => {
        const uuid = buildBitUUID();
        deleteDictionary({
          dictionaryTypeId: '539395626211742999',
          enCode: uuid,
          enabledMark: '',
          fullName: v.experts,
          id: v.id,
          parentId: '0',
          sortCode: '',
        }).then(res => {
          console.log('res', res);
          createMessage.success('删除成功!');
          isZbShow.value = false;
          init();
        });
      },
    });
    console.log('toDel', v);
  };
  // 分页列表查看
  const hasView = v => {
    queryInfo({
      id: v.id,
    }).then(res => {
      console.log('res', res);
      let data = res.data;
      state.detailInfo = {
        zjxm: data.expertName, //专家姓名
        lxfs: data.phoneNumber, //联系方式
        zjbh: data.id, //专家编号
        zjzb: data.expertGroup, //专家组别
        zjxb: data.sex, //专家性别
        csrq: data.birthday, //出生日期
        zjly: data.expertSources, //专家来源
        gzdw: data.workUnit, //工作单位
        xrzw: data.post, //现任职务
        jszc: data.technicalPosition, //专业技术职称
        zyzc: data.professionalExpertise, //专业专长
        gl: data.workingYears, //工龄
        zt: data.status, //状态
      };
    });
    detailShow.value = true;
    console.log('hasView', v);
  };
  // 分页列表编辑
  const hasEdit = v => {
    addTitle.value = '编辑专家';
    state.formSchemas = {
      proName: v.expertName, //专家姓名
      proNumber: v.id, //专家编号
      proGroup: v.expertGroup, //专家组别
      proGender: v.sex, //性别
      proTel: v.phoneNumber, //联系方式
      proBirthday: v.birthday, //出生日期
      proSource: v.expertSources, //专家来源
      proUnits: v.workUnit, //工作单位
      proDuties: v.post, //现任职务
      proFessional: v.technicalPosition, //技术职称
      proSpecialty: v.professionalExpertise, //专业特长
      proAge: v.workingYears, //工龄
      proStatus: v.status, //状态
    };
    state.formUnit = {
      unitName: '', //单位名称
      unitId: '', //单位名称
    };
    open.value = true;
  };

  // 分页列表删除
  const hasDel = v => {
    console.log('hasDel', v);
    createConfirm({
      iconType: 'warning',
      title: '温馨提示',
      content: `请确认是否要删除该条数据,删除后则该条数据不再显示。`,
      onOk: () => {
        deleteList({
          id: v.id,
        }).then(res => {
          console.log('res', res);
          createMessage.success('操作成功!');
          init();
        });
      },
    });
  };
  //专家组别确认弹窗
  const handleZbOk = async () => {
    try {
      const values = await formZbRef.value?.validate();
      const uuid = buildBitUUID();
      if (values) {
        if (zbTitle.value === '新增专家组别') {
          addDictionary({
            dictionaryTypeId: '539395626211742999',
            enCode: uuid,
            enabledMark: '',
            fullName: values.experts,
            id: '',
            parentId: '0',
            sortCode: '',
          }).then(res => {
            console.log('res', res);
            init();
            createMessage.success('创建成功!');
            isZbShow.value = false;
          });
        } else {
          editDictionary({
            dictionaryTypeId: '539395626211742999',
            enCode: uuid,
            enabledMark: '',
            fullName: values.experts,
            id: state.formExperts.id,
            parentId: '0',
            sortCode: '',
          }).then(res => {
            console.log('res', res);
            init();
            createMessage.success('更新成功!');
            isZbShow.value = false;
          });
        }
      }
    } catch (_) {}
  };
  //工作单位确认弹窗
  const handleUtOk = async () => {
    try {
      const values = await formUtRef.value?.validate();
      if (values) {
        state.formSchemas.proUnits = state.formUnit.unitName;
        unitsShow.value = false;
      }
    } catch (_) {}
  };
  //详情弹窗
  const handleDetailOk = async () => {
    detailShow.value = false;
  };
  //确认新建弹窗
  const handleOk = async () => {
    try {
      const values = await formRef.value?.validate();
      if (values) {
        console.log('state.formSchemas', state.formSchemas);
        if (addTitle.value == '新增专家') {
          addZjList({
            dataType: '1', //新增类型 1-专家 2-公司 默认专家
            expertName: state.formSchemas.proName, //专家姓名
            expertGroup: state.formSchemas.proGroup, //专家组别(字典表id)
            companyName: '', //公司名称(招投标类型)
            phoneNumber: state.formSchemas.proTel, //联系方式
            birthday: state.formSchemas.proBirthday ? dayjs(state.formSchemas.proBirthday).format('YYYY-MM-DD') : '', //出生日期
            expertSources: state.formSchemas.proSource, //专家来源 1-内部专家 2-外部专家
            workUnit: state.formSchemas.proUnits, //工作单位名称
            post: state.formSchemas.proDuties, //职务
            technicalPosition: state.formSchemas.proFessional, //专业技术职称
            professionalExpertise: state.formSchemas.proSpecialty, //专业专长
            sex: state.formSchemas.proGender, //性别 1-男 2-女
            workingYears: state.formSchemas.proAge, //工龄
            status: state.formSchemas.proStatus, //状态0-有效 1-无效
          }).then(res => {
            console.log('res', res);
            init();
            createMessage.success('创建成功!');
            open.value = false;
          });
        } else {
          editList({
            dataType: '1', //新增类型 1-专家 2-公司 默认专家
            expertName: state.formSchemas.proName, //专家姓名
            expertGroup: state.formSchemas.proGroup, //专家组别(字典表id)
            companyName: '', //公司名称(招投标类型)
            phoneNumber: state.formSchemas.proTel, //联系方式
            birthday: state.formSchemas.proBirthday ? dayjs(state.formSchemas.proBirthday).format('YYYY-MM-DD') : '', //出生日期
            expertSources: state.formSchemas.proSource, //专家来源 1-内部专家 2-外部专家
            workUnit: state.formSchemas.proUnits, //工作单位名称
            post: state.formSchemas.proDuties, //职务
            technicalPosition: state.formSchemas.proFessional, //专业技术职称
            professionalExpertise: state.formSchemas.proSpecialty, //专业专长
            sex: state.formSchemas.proGender, //性别 1-男 2-女
            workingYears: state.formSchemas.proAge, //工龄
            status: state.formSchemas.proStatus, //状态0-有效 1-无效
            id: state.formSchemas.proNumber, //专家编号
          }).then(res => {
            console.log('res', res);
            init();
            createMessage.success('编辑成功!');
            open.value = false;
          });
        }
      }
    } catch (_) {}
  };
  // 工作单位选择事件
  const hasChoose = () => {
    state.formUnit.unitName = ''; //每次弹出 置空
    unitsShow.value = true;
  };
  // 批量导入
  const uploadList = () => {
    // fileUploaderRef.value?.openUploader();
  };
  // 上传回调事件
  function handleFileSuccess(data) {
    // let params = {
    //   id: proId.value,
    //   uploaderVO: {
    //     name: data.name,
    //     url: data.url,
    //     fileVersionId: data.fileId,
    //     fileSize: data.fileSize,
    //     fileExtension: data.fileExtension,
    //     thumbUrl: data.url,
    //   },
    // };
    // uploadExtractionResults(params).then(res => {
    //   createMessage.success('操作成功！');
    // });
    console.log('data', data);
  }
</script>
<style lang="less" scoped>
  .input-container {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    gap: 4px; /* 标签和输入框之间的间距 */
  }

  .label {
    width: 110px !important; /* 设置标签宽度 */
    // margin-right: 10px; /* 标签与输入框之间的间距 */
  }
  a-input {
    flex: 1; /* 使输入框在容器中尽可能扩展 */
    margin: 0 5px; /* 输入框左右的间距 */
  }
  .button {
    position: absolute;
    right: 10px;
  }
  .button-container {
    display: flex;
    flex-wrap: wrap; /* 允许按钮换行 */
    justify-content: flex-start; /* 按钮对齐方式，根据需要可以调整 */
  }

  .operation-button {
    white-space: nowrap; /* 防止按钮文本换行 */
  }
  .ant-table-tbody > tr > td {
    padding: 0;
  }
  .jnpf-container {
    display: flex;
  }

  .jnpf-tree-section {
    width: 250px; /* 可以根据需要调整宽度 */
    border-right: 10px solid #ebeef5;
    padding: 10px;
    background: #fafafa;
  }

  .jnpf-content-section {
    flex: 1; /* 使内容区域占据剩余空间 */
    padding: 10px;
  }
  .box_title {
    padding: 10px;
    font-weight: bold;
    font-size: 16x;
  }
  .line {
    width: 100%;
    border-bottom: 1px solid #ebeef5;
  }
  .box_content {
    position: relative;
  }
  .add_btn {
    position: absolute;
    z-index: 999;
    right: 10px;
    top: 10px;
  }
  .item {
    padding: 10px;
    margin: 5px;
    cursor: pointer;
    transition: background-color 0.3s, border-left 0.3s;
  }

  .item.active {
    background-color: #e6f4ff;
    border-left: 5px solid #3276ff;
  }
  .item:hover {
    background-color: #e6f4ff;
    border-left: 5px solid #3276ff;
  }
  .icon {
    float: right;
    font-size: 15px;
    margin-left: 10px;
    margin-top: 5px;
  }
  .ant-popover-buttons {
    display: flex;
  }
  .ant-modal .ant-modal-body {
    padding: 0 12px 0 0;
  }
  .ant-form {
    padding: 20px 40px 20px 10px;
  }
  .detail_box {
    width: 100%;
    height: 400px;
    padding: 20px 30px;
  }
  .detail_title {
    font-weight: bold;
    font-size: 16px;
    padding-left: 10px;
    border-left: 3px solid #448ef7;
  }
  .container {
    margin: 20px 0 20px 0;
    display: flex;
    width: 100%; /* 使容器宽度为100% */
    height: 35px; /* 设置高度 */
  }
  .box {
    flex: 1; /* 使每个盒子等分宽度 */
    display: flex;
    font-weight: bold;
    padding: 0 10px;
    span {
      font-weight: normal;
      font-family: 'Microsoft YaHei';
    }
  }
  :deep(.ant-table-tbody > tr > td) {
    padding: 0 !important;
  }
  .custom-cell {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dcq-dot {
    width: 4px;
    height: 4px;
    background-color: #ff8d23; /* Change the color as needed */
    border-radius: 50%;
    margin-right: 8px;
  }
  .ycq-dot {
    width: 4px;
    height: 4px;
    background-color: #52c41a; /* Change the color as needed */
    border-radius: 50%;
    margin-right: 8px;
  }
  :deep(.ant-upload-list) {
    display: none;
  }
  :deep(.jnpf-content-wrapper-content .ant-table-empty .ant-table-tbody > tr.ant-table-placeholder) {
    height: 400px;
  }
  // :deep(.ant-table-tbody) {
  //   height: 400px;
  // }
  //:deep(.ant-table-tbody) {
  //height: 400px;
  //}
  :deep(.ant-table-thead > tr > th) {
    color: rgba(0, 0, 0, 0.85);
    font-weight: 600;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.3s ease;
  }
  :deep(.ant-table-tbody > tr > td) {
    color: rgba(0, 0, 0, 0.85);
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
  }
</style>
